<template>
  <a-spin :loading="spinLoading" :size="35" class="w-[100%]" tip="正在处理, 请稍候...">
    <a-space direction="vertical" fill size="medium">
      <div class="flex items-center justify-center text-3xl">{{ form.newsTitle }}</div>
      <div class="flex items-center justify-center">
        <a-space size="medium">
          <template #split>
            <a-divider direction="vertical"/>
          </template>
          <span
          >创建人：<dict-convert
              :dict-data="dicts[proxy.DICT.userList]"
              :dict-key="form.createId"
          /></span>
          <span>创建时间：{{ form.createTime }}</span>
          <span
          >发布人：<dict-convert
              :dict-data="dicts[proxy.DICT.userList]"
              :dict-key="form.publishAuthorId"
          /></span>
          <span
          >发布部门：<dict-convert
              :dict-data="dicts[proxy.DICT.deptList]"
              :dict-key="form.publishDeptId"
          /></span>
          <span>发布时间：{{ form.publishTime }}</span>
        </a-space>
      </div>
      <div class="flex items-center justify-center">
        <a-space size="medium">
          <template #split>
            <a-divider direction="vertical"/>
          </template>
          <span>排序：{{ form.newsSort }}</span>
          <span
          >是否置顶：<dict-convert
              :dict-data="dicts[proxy.DICT.yesNo]"
              :dict-key="form.newsTop"
          /></span>
          <span
          >新闻状态：<dict-convert
              :dict-data="dicts[proxy.DICT.status]"
              :dict-key="form.status"
          /></span>
        </a-space>
      </div>
      <!-- 封面图片显示 -->
      <div v-if="newsPicFile.length > 0" class="flex justify-center">
        <div class="w-[70%]">
          <a-carousel
            :auto-play="{ interval: 3000 }"
            :show-arrow="always"
            indicator-type="dot"
            trigger="hover"
          >
            <a-carousel-item v-for="(pic, index) in newsPicFile" :key="index">
              <a-image
                :src="pic.url"
                :alt="`封面图片${index + 1}`"
                class="w-full h-auto max-h-96 object-contain"
                show-loader
                preview
              />
            </a-carousel-item>
          </a-carousel>
        </div>
      </div>
      <div class="flex justify-center">
        <div class="w-[70%]" v-html="form.newsContent"></div>
      </div>
    </a-space>
  </a-spin>
</template>

<script setup>
import {getCurrentInstance, reactive, ref, watch} from "vue";
import {getNewsByNewsIdApi} from "~/api/lindi/news.js";
import "tinymce/skins/ui/oxide/content.css";
import "tinymce/skins/ui/oxide/skin.css";

//全局实例
const {proxy} = getCurrentInstance();
//加载字典
const dicts = proxy.LoadDicts([
  proxy.DICT.commonNumberStatus,
  proxy.DICT.userList,
  proxy.DICT.deptList,
  proxy.DICT.yesNo,
]);
//加载中...
const spinLoading = ref(false);
//封面图片
const newsPicFile = ref([]);
//接收父组件参数
const props = defineProps({
  params: {
    type: Object,
    default: () => {
    },
  },
});
//表单
const form = reactive({
  //新闻ID
  newsId: null,
  //新闻标题
  newsTitle: null,
  //新闻内容
  newsContent: null,
  //是否置顶
  newsTop: null,
  //排序值
  newsSort: null,
  //发布部门
  publishDeptId: null,
  //发布人
  publishAuthorId: null,
  //发布时间
  publishTime: null,
  //新闻状态
  status: null,
  //创建人
  createId: null,
  //创建时间
  createTime: null,
});
//加载新闻详细信息
const loadNewsInfo = (newsId) => {
  spinLoading.value = true;
  getNewsByNewsIdApi(newsId)
      .then((res) => {
        //数据赋值
        if (res) {
          for (let key in res) {
            if (form.hasOwnProperty(key)) {
              form[key] = res[key];
            }
          }
          // 处理封面图片显示
          if (res.newsPicFile && Array.isArray(res.newsPicFile)) {
            newsPicFile.value = res.newsPicFile.map(file => ({
              url: file.fileUrl,
              response: {
                fileId: file.fileId,
                fileName: file.fileName,
                fileUrl: file.fileUrl
              }
            }));
          } else {
            newsPicFile.value = [];
          }
        }
      })
      .finally(() => {
        spinLoading.value = false;
      });
};
//监听参数变化
watch(
    () => props.params,
    (newVal, oldVal) => {
      //新闻ID
      if (props.params.newsId) {
        //查询数据
        loadNewsInfo(props.params.newsId);
      }
    },
    {deep: true, immediate: true}
);
</script>
<style scoped></style>
